<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>姓名案例-计算属性简写</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    姓：<input type="text" v-model="firstName" /> <br /><br />
    名：<input type="text" v-model="lastName" /> <br /><br />
    <!-- 此时的fullName不要加()，因为它是计算属性 -->
    全名：<span>{{fullName}}</span> <br /><br />
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false; // 阻止Vue在启动时生成生产提示。

  const vm = new Vue({
    el: "#root",
    data: {
      firstName: "张",
      lastName: "三"
    },
    computed: {
      /* 
      // 完整写法
      fullName:{
        get(){
          console.log('get被调用了')
          return this.firstName + '-' + this.lastName
        },
        set(value){
          console.log('set',value)
          const arr = value.split('-')
          this.firstName = arr[0]
          this.lastName = arr[1]
        }
      } */
      // 简写（计算属性只考虑读取，不考虑修改的情况下可以简写）
      fullName() {
        console.log("get被调用了");
        return this.firstName + "-" + this.lastName;
      }
    }
  });
</script>

</html>